<script setup>
import {useRouter} from "vue-router";

const router = useRouter();

function navigationTo(val) {
  router.push({
    name: val
  })
}
</script>
<template>
  <div class="search-container">
    <t-search v-model="value" placeholder="请输入关键字" @submit="onSubmit" @action-click="onActionClick"></t-search>
  </div>

  <t-cell-group title="收藏">
    <t-grid class="block" :column="1">
      <t-grid-item text="暂未完善">
        <template #image>
          <t-icon name="close-circle" size="large" style="color: #d54941;"></t-icon>
        </template>
      </t-grid-item>
    </t-grid>
  </t-cell-group>

  <t-cell-group title="招新管理">
    <t-grid class="block" :column="4">
      <t-grid-item text="入会申请" icon="user-add" @click="navigationTo('member-apply')">
        <template #image>
          <t-icon name="user-add" size="large" style="color: #0052d9;"></t-icon>
        </template>
      </t-grid-item>
      <t-grid-item text="入会审批" icon="check" @click="navigationTo('member-approve')">
        <template #image>
          <t-icon name="check" size="large" style="color: #0052d9;"></t-icon>
        </template>
      </t-grid-item>
      <t-grid-item text="萌新培训">
        <template #image>
          <t-icon name="view-column" size="large" style="color: #0052d9;"></t-icon>
        </template>
      </t-grid-item>
      <t-grid-item text="账号绑定" icon="link">
        <template #image>
          <t-icon name="link" size="large" style="color: #0052d9;"></t-icon>
        </template>
      </t-grid-item>
    </t-grid>
  </t-cell-group>

  <t-cell-group title="车工计算">
    <t-grid class="block" :column="4">
      <t-grid-item text="圆弧接点">
        <template #image>
          <t-icon name="view-column" size="large" style="color: #0052d9;"></t-icon>
        </template>
      </t-grid-item>
      <t-grid-item text="螺纹加工">
        <template #image>
          <t-icon name="view-column" size="large" style="color: #0052d9;"></t-icon>
        </template>
      </t-grid-item>
      <t-grid-item text="宏程序">
        <template #image>
          <t-icon name="view-column" size="large" style="color: #0052d9;"></t-icon>
        </template>
      </t-grid-item>
      <t-grid-item text="G代码对照表">
        <template #image>
          <t-icon name="view-column" size="large" style="color: #0052d9;"></t-icon>
        </template>
      </t-grid-item>
    </t-grid>
  </t-cell-group>

  <t-cell-group title="协会管理">
    <t-grid class="block" :column="4">
      <t-grid-item text="物品借用">
        <template #image>
          <t-icon name="arrow-up-circle" @click="navigationTo('loanView')" size="large" style="color: #0052d9;"></t-icon>
        </template>
      </t-grid-item>
      <t-grid-item text="物品管理" @click="navigationTo('material')">
        <template #image>
          <t-icon name="chart" size="large" style="color: #0052d9;"></t-icon>
        </template>
      </t-grid-item>
      <t-grid-item text="加工预约">
        <template #image>
          <t-icon name="form" size="large" @click="navigationTo('machine-reservation')" style="color: #0052d9;"></t-icon>
        </template>
      </t-grid-item>
      <t-grid-item text="申请审批">
        <template #image>
          <t-icon name="task-checked" size="large" style="color: #0052d9;"></t-icon>
        </template>
      </t-grid-item>
    </t-grid>
  </t-cell-group>
</template>
<style scoped lang="less">
.search-container {
  background-color: #fff;
  padding: 6px;
}
</style>